import { Modal } from "./Modal";
import styles from "./ConfirmModal.module.css";
import { Button } from "../components/form";
import { ModalIf } from "../../../core/types/modal";
import { useModal } from "../../store/useModal";

export function ConfirmModal(props: ModalIf) {
    const { id } = props;
    const getModalStore = useModal((state) => state.getModal);
    const modalStore = getModalStore(id);
    if (!modalStore) {
        return;
    }
    const toggleModal = useModal((state) => state.toggleModal);
    let { isOpen, type, title, content, onOk, onCancel } = modalStore;
    title = title || "提示";
    if (type === "confirm") {
        content = content || "请确认是否继续操作？";
    }
    const handleConfirmClick = async () => {
        onOk && (await onOk());
        toggleModal(id);
    };
    const handleCancelClick = async () => {
        onCancel && (await onCancel());
        toggleModal(id);
    };
    const buttons = [];
    buttons.push(
        <Button
            onClick={handleCancelClick}
            key={"cancel"}
            variant={type === "alert" ? "primary" : "secondary"}
        >
            关闭
        </Button>,
    );
    if (type === "confirm") {
        buttons.push(
            <Button
                onClick={handleConfirmClick}
                variant="primary"
                key={"confirm"}
            >
                确认
            </Button>,
        );
    }
    return (
        <Modal title={title} isOpen={isOpen} onClose={handleCancelClick}>
            <div className={styles.content}>{content}</div>
            <div className={styles.buttons}>{buttons}</div>
        </Modal>
    );
}
